import {} from 'react'
import { Space, Tooltip } from 'antd'
import { colors } from '@js/config'
import style from './index.module.less'
import { CaseSchema } from '@src/components/schema/caseSchema'

function renderTag (showTag: boolean, tagName: string, color = colors[0], title: string, cursor = false, clickHandle = () => {}) {
  if (!showTag) {
    return null
  }
  const s: { [k: string]: any } = { backgroundColor: color }
  if (cursor) {
    s.cursor = 'pointer'
  }
  if (title) {
    return (
      <Tooltip title={title}>
        <span className={style.tag} style={s} onClick={clickHandle}>{tagName}</span>
      </Tooltip>
    )
  }
  return (
    <span className={style.tag} style={s} onClick={clickHandle}>{tagName}</span>
  )
}

interface Props {
  data: CaseSchema
}

function Main ({ data }: Props) {
  return (
    <div className={style.container}>  
      <Space>
        {renderTag(true, data.cause_action, colors[11], '')}
        {renderTag(true, data.procedure, colors[3], '')}
        {renderTag(typeof data.processer_serieno === 'string', data.processer_serieno, colors[8], '')}
        {renderTag(typeof data.accepter_serieno === 'string', data.accepter_serieno, colors[1], '')}
      </Space>
    </div>
  )
}

export default Main
